<template>
    <div>
        <usertop :title="msg"/>
        <div class="search">
            <input placeholder="输入快递单号" v-model="id" type="text">
            <div class="btn_box" v-if="id">
                <el-button class="searchbtn" type="primary" icon="el-icon-search" circle @click="getMsg()"></el-button>
            </div>
        </div>
        <div v-if="lists.length != 0" class="exp_box">
            <div class="exp_head">
                <span>{{expName}}</span>
                <span>{{expNo}}</span>
            </div>
            <el-timeline>
                <el-timeline-item
                        v-for="(item, index) in lists"
                        :key="index"
                        :timestamp="item.time">
                    {{item.context}}
                </el-timeline-item>
            </el-timeline>
        </div>
    </div>
</template>

<script>
    import usertop from "../userMine/usertop";
    export default {
        name: "search",
        data() {
            return {
                msg: '查包裹',
                id: '',
                expName: '',
                expNo: '',
                lists: []
            }
        },
        components: { usertop },
        methods: {
            getMsg() {
                let url = 'https://route.showapi.com/64-19?com=auto&nu='+this.id+
                    '&showapi_appid=366470&showapi_sign=2e2081f9ed854c48a80a2b8600963011';
                this.$http.get(url).then(({data}) => {
                    this.expName = data.showapi_res_body.expTextName;
                    this.expNo = data.showapi_res_body.mailNo;
                    this.lists = data.showapi_res_body.data;
                }).catch((error) => {
                    console.log(error);
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.search {
    display: flex;
    padding: 20px;
    height: 60px;
    font-size: 20px;
    input {
        flex: 1;
        padding: 10px 20px;
        -webkit-appearance: none;
        background-color: #FFF;
        background-image: none;
        border: 1px solid #DCDFE6;
        border-radius: 30px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        line-height: 60px;
        outline: 0;
        -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
        transition: all .3s cubic-bezier(.645,.045,.355,1);
        width: 100%;
        &:focus {
            border-color: #2f8cff;
        }
    }
    .btn_box {
        margin-left: 20px;
        width: 60px;
        .searchbtn {
            width: 100%;
            height: 100%;
            font-size: 28px;
        }
    }
}

.exp_box {
    background-color: #fff;
    border-radius: 20px;
    margin: 20px;
    overflow: hidden;
    font-size: 20px;
    .exp_head {
        padding: 20px;
        background-color: #bdd4ff;
        span:first-child {
            margin-right: 10px;
        }
    }
    .el-timeline {
        padding: 20px;
        .el-timeline-item {
            padding-bottom: 30px;
        }
    }
}
</style>